<template>
    <div class="container_box">
        <el-scrollbar class="main_box2">
            <div class="create_group">
                <div class="new_card_box box_card bdt_none">
                    <div class="box_card_tit"><strong>拉群方式</strong></div>
                    <div class="cust_qs body_padding">
                        <el-form
                            ref="formRef"
                            :model="formData"
                            label-width="80px"
                            label-position="left"
                            :disabled="look">
                            <el-form-item label="拉群方式" class="pull_group">
                                <el-radio-group v-model="formData.group_type">
                                    <el-radio label="1">群二维码拉群</el-radio>
                                    <el-radio label="2">企业活码拉群</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="" class="pull_group">
                                <template v-if="formData.group_type == '1'">
                                    <div class="group_type_tips">
                                        客户扫码添加客服人员后，自动推送某群聊的二维码，邀请客户入群，该二维码仅7天有效期，请留意群二维码时间，及时更换过期的二维码，避免因过期而无法入群。
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="group_type_tips">
                                        无需创建群聊即可在企微后台生成群聊活码，拉群二维码将永久有效，快来创建试试吧。
                                        <span class="text_create" @click="howCreate">查看如何创建</span>
                                    </div>
                                </template>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="new_card_box box_card" shadow="never">
                    <div class="box_card_tit"><strong>基础信息</strong></div>
                    <div class="body_padding">
                        <el-form
                            ref="formRef"
                            class="base_info"
                            :model="formData"
                            :rules="formRule"
                            label-width="100px"
                            label-position="left"
                            :disabled="look">
                            <el-form-item label="群聊名称" prop="name" class="form_item_name">
                                <el-input
                                    v-model="formData.name"
                                    placeholder="请输入群聊名称"
                                    maxlength="25"
                                    show-word-limit
                                    @input="chatNames"></el-input>
                            </el-form-item>
                            <!-- 分组 -->
                            <el-form-item label="所属分组" prop="group_id">
                                <el-cascader
                                    ref="cascaderRef"
                                    v-model="formData.group_id"
                                    class="group_base"
                                    style="width: 100%"
                                    :options="groupData"
                                    filterable
                                    :props="defaultProps"
                                    placeholder="请选择分组"
                                    @change="orgChange" />
                            </el-form-item>
                            <el-form-item label="二维码设置">
                                <div class="erm_container">
                                    <div class="ewm_box">
                                        <img class="user_qrwm" src="@/assets/image/LiveCode/qw_icon.png" />
                                        <el-image class="user_avatar" :src="formData.avatar_link">
                                            <template #error>
                                                <el-icon style="font-size: 40px"><icon-picture /></el-icon>
                                            </template>
                                        </el-image>
                                    </div>
                                    <template v-if="!look">
                                        <el-upload
                                            class="avatar_uploader"
                                            action=""
                                            :limit="1"
                                            accept="image/*"
                                            list-type="picture-card"
                                            :http-request="uploadRequest"
                                            :on-remove="handleRemove"
                                            :on-preview="handlePictureCardPreview"
                                            :file-list="ewmData"
                                            :class="{ hide: hideUpload }"
                                            :before-upload="beforeUpdata"
                                            @mouseover="mouseOver"
                                            @mouseleave="mouseLeave">
                                            <template v-if="!hideUpload" #default>
                                                <div class="upload-box">
                                                    <el-icon class="avatar_icon"><Plus /></el-icon>
                                                    <div class="plus_text">更换头像</div>
                                                </div>
                                            </template>
                                        </el-upload>
                                    </template>
                                </div>
                                <div class="ewm_box_tips">* 此二维码只是样式预览效果，请勿直接使用</div>
                            </el-form-item>
                            <el-form-item class="user_staff_item form_item_user" label="使用成员" prop="user">
                                <zw-unity-kit-select-items
                                    v-model="creators"
                                    type="staff"
                                    tag-btn-name="成员"
                                    :disabled="look"
                                    @change="getDepart" />
                            </el-form-item>
                            <el-form-item label="员工添加上限" class="limit_form_box">
                                <el-switch
                                    v-model="formData.user_limit_flag"
                                    :active-value="1"
                                    :inactive-value="2"
                                    :disabled="creators.length == 0"></el-switch>
                                <template v-if="formData.user_limit_flag == 1">
                                    <div class="user_limit_tips">
                                        员工添加上限：1、员工从任何渠道添加的客户，都会计入员工添加上限；2、到达添加上限后，只影响设置了添加上限的渠道活码。
                                    </div>
                                    <div class="table_form_btn">
                                        <el-input
                                            v-model="userNamme"
                                            class="table_form_search"
                                            placeholder="输入成员姓名"
                                            :prefix-icon="Search"
                                            clearable
                                            @input="searchUserLimit" />
                                        <el-button plain :disabled="select_all_user_data.length == 0" @click="batchOpen"
                                            >批量操作</el-button
                                        >
                                    </div>
                                    <el-table
                                        header-row-class-name="table_header_title"
                                        style="width: 740px"
                                        height="300"
                                        :data="formData.user_limit"
                                        @selection-change="handleSelectionChange">
                                        <el-table-column type="selection" width="50"></el-table-column>
                                        <el-table-column :label="`共${formData.user_limit.length}个员工`">
                                            <template #default="scope">
                                                <div class="customer_info_box">
                                                    <el-image :src="scope.row.avatar" style="width: 40px" class="mr10">
                                                        <template #error>
                                                            <el-icon style="font-size: 40px"><icon-picture /></el-icon>
                                                        </template>
                                                    </el-image>
                                                    <span>{{ scope.row.name }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="每日添加客户上限" fixed="right">
                                            <template #default="scope">
                                                <el-input
                                                    v-model="scope.row.limit"
                                                    class="input_num"
                                                    :min="1"
                                                    :max="200"
                                                    @input="inputNum(scope.row)" />
                                            </template>
                                        </el-table-column>
                                        <template #empty>
                                            <img
                                                style="transform: translateX(15%); margin-top: 50px"
                                                src="@/assets/noData.png"
                                                alt="" />
                                            <div style="margin-top: -50px">{{ '暂无数据' }}</div>
                                        </template>
                                    </el-table>
                                </template>
                            </el-form-item>
                            <el-form-item label="备用员工" prop="reserve_user" class="form_item_reserve_user">
                                <el-select
                                    v-model="formData.reserve_user"
                                    popper-class="zw-hide_select_option"
                                    class="reserve_select"
                                    placeholder="请选择员工"
                                    @click="openDepart2">
                                </el-select>
                                <span class="reserve_select_tips">当活码中所有员工不可接待时，将分配客户给该员工</span>
                            </el-form-item>
                            <el-form-item label="好友验证" class="friend_form_item">
                                <el-switch v-model="formData.verify_flag" :active-value="1" :inactive-value="2">{{
                                    `${formData.verify_flag == 1 ? '已开启' : '已关闭'}`
                                }}</el-switch>
                                <span class="reserve_select_tips"
                                    >开启好友验证后，用户扫码添加好友需要验证后才会添加成功，关闭好友验证后不需要验证，直接添加成功。</span
                                >
                            </el-form-item>
                            <el-form-item label="标签" :prop="formData.tag_flag == 1 ? 'tag_list' : ''">
                                <div>
                                    <el-switch
                                        v-model="formData.tag_flag"
                                        :active-value="1"
                                        :inactive-value="2"></el-switch>
                                    <template v-if="formData.tag_flag == 1">
                                        <div><el-button plain @click="selecTag">添加标签</el-button></div>
                                        <el-tag
                                            v-for="tag in AllTagList"
                                            :key="tag.id"
                                            class="mr10"
                                            type="warning"
                                            plain
                                            :closable="!look"
                                            :disable-transitions="false"
                                            @close="handleClose(tag.id)">
                                            {{ tag.name }}
                                        </el-tag>
                                    </template>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="new_card_box bdb_none box_card mb0" shadow="never">
                    <div class="box_card_tit"><strong>设置入群引导语</strong></div>
                    <div class="cust_qs pre_welcome content">
                        <div class="content-left">
                            <div class="welcone_l">
                                <!-- 设置入群引导语 -->
                                <MaterialContent
                                    ref="materialContentRef"
                                    :max-num="8"
                                    :input-content-tabs="inputContentTabs"
                                    :show-material-tabs="showMaterialTabs"
                                    :input-content-data="inputContentData"
                                    :material-content-data="materialContentData"
                                    :disabled="look"
                                    @change="changeMaterial" />
                                <div class="lead_words">
                                    <div>提示：</div>
                                    <ul>
                                        <li>1、可添加多个群聊，当前面的群人数达到上限时，自动发送后面的群二维码；</li>
                                        <li>2、群人数上限最多200人；</li>
                                        <li>
                                            3、上传群二维码时请【仔细核对】，群二维码和群聊【对应错误】将导致【拉群任务失败】；
                                        </li>
                                        <li>
                                            4、若群内添加了小助理机器人，请将【人数上限减1】，否则可能会导致拉群失败。
                                        </li>
                                    </ul>
                                </div>
                                <div style="width: 700px">
                                    <!-- 群拉二维码 -->
                                    <GroupChat v-if="formData.group_type == '1'" ref="GroupChatRef" :look="look" />
                                    <!-- 群活码 -->
                                    <AutoGroup v-else ref="AutoGroupRef" :look="look" />
                                </div>
                                <div v-if="formData.group_type == '2'" class="group_type_tips create_erm_desc">
                                    请上传在企业微信后台创建的活码。
                                    <span class="text_create" @click="howCreate">去创建 查看如何创建</span>
                                </div>
                            </div>
                        </div>
                        <div class="content-right">
                            <div class="phone-title">消息内容预览</div>
                            <PhonePreview ref="phonePreviewRef" />
                        </div>
                    </div>
                </div>
                <!--备用成员 -->
                <ZwUnityKitSelectDepart
                    v-model="departVisible"
                    :selected="[reserve_userList]"
                    select-type="user"
                    :multiple="false"
                    v-bind="{}"
                    @submit="getDepart2" />
                <!-- 标签弹框 -->
                <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
                <!-- 批量操作 -->
                <BatchOpration ref="BatchOprationRef" @submit="batchsetNum" />
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <template v-if="look">
                <el-button type="primary" @click="confimBack">确定</el-button>
            </template>
            <template v-else>
                <el-button @click="cancel(formRef)">取消</el-button>
                <el-button type="primary" @click="save(formRef)">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Search, Picture as IconPicture, Delete } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
import GroupChat from './components/groupChat.vue';
import AutoGroup from './components/autoGroup.vue';
import BatchOpration from './components/batchOpration.vue';
import BatchLabel from '@/components/BatchLabel.vue';
import { ElMessage } from 'element-plus';
import { getSetionId, getImage_wh, IsNotEmpty, getSuffixIcon } from '@/utils/utils';
import { autoGroupInfo, autoGroupEdit, autoGroupCreate } from '@/api/customerCenter/autoPullGroup';
import { uploadFile2 } from '@/api/common';
import { getGroupList } from '@/api/concreation';
import { useRoute } from 'vue-router';
import router from '@/router';
import type { FormInstance, UploadFile, UploadFiles } from 'element-plus';
import { useStore } from '@/store';
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
import { initMaterialData } from '@/utils/utils';

const departVisible = ref(false);

const route = useRoute();
const store = useStore();
store.dispatch('content/group', {
    groupId: +route?.query?.group_id
});

const inputContentTabs = ref<Array<number>>([5, 1, 2]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材

const formRef = ref<FormInstance>();
let suffix = null;
let input__inner = null;
const img = document.createElement('img');
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const BatchLabelRef = ref(null);
const GroupChatRef = ref(null);
const AutoGroupRef = ref(null);
const BatchOprationRef = ref(null);
const cascaderRef: any = ref(null); // 选择分组ref

const ewmData = ref([]);
const userNamme = ref('');
const isEdit = ref(false);
const look = ref(false);
const autoGroupId = ref(0);
const groupData = ref([]);
const creators = ref([]); // 成员列表
const creators2 = ref([]); // 备用成员列表
const AllTagList = ref([]);
const select_all_user_data = ref([]); // 选中的用户
const reserve_userList = ref({});
const defaultProps = {
    checkStrictly: true,
    emitPath: false,
    label: 'name',
    value: 'id'
};
const formData = reactive({
    group_type: '1',
    name: '',
    group_id: 0,
    avatar_link: '', //二维码头像
    user: [], //使用人员
    user_limit_flag: 2, //使用人员上限开关
    user_limit: [],
    reserve_user: '', //备用成员
    verify_flag: 2, //好友验证开关 1开 2关
    tag_flag: 2, //标签开关 1开 2关
    welcome_content: '', //入群引导语内容
    tag_list: [], //标签（tag_flag=2时必填）
    // welcome_attachment: [], //素材库
    // local_link: [], //本地链接
    // local_content: [], //本地附件
    welcome_info: {},
    groupchat: [], //客户群
    groupchat_code: [] ///群活码
});
const mouseOver = () => {
    const dom: any = document.querySelector('.plus_text');
    const dom2: any = document.querySelector('.avatar_icon');
    dom.style.color = dom2.style.color = '#ff6b00';
};
const mouseLeave = () => {
    const dom: any = document.querySelector('.plus_text');
    const dom2: any = document.querySelector('.avatar_icon');
    dom.style.color = dom2.style.color = '#969696';
};
const hideUpload = computed(() => {
    return ewmData.value.length > 0;
});
const beforeUpdata = async (file: any) => {
    const is2M = file.size / 1024 / 1024 <= 2;
    if (!is2M) {
        ElMessage.warning(`上传的图片最大支持2M`);
        handleRemove(file, []);
        return false;
    }
    return is2M;
};
const uploadRequest = async (item: any) => {
    const file = item.file;
    const param = {
        file,
        fileName: file.name
    };
    const flag = await beforeUpdata(file);
    if (!flag) return;
    const res = await uploadFile2(param);
    ewmData.value = [res];
    formData.avatar_link = res.url!;
};
const chatNames = (e: string) => {
    formData.name = e.replace(/\s+/g, '');
};
const handleRemove = (file, files) => {
    formData.avatar_link = '';
    ewmData.value = files;
};
const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!;
    dialogVisible.value = true;
};
const formRule = reactive({
    name: { required: true, message: '群聊名称不能为空', trigger: 'blur' },
    welcome_content: { required: true, message: '入群引导语不能为空', trigger: 'blur' },
    group_id: { required: true, message: '所属分组不能为空', trigger: ['change', 'blur'] },
    user: { required: true, message: '使用人员不能为空', trigger: ['click'] },
    reserve_user: { required: true, message: '备用成员不能为空', trigger: ['change', 'blur'] },
    tag_list: { required: true, message: '标签不能为空', trigger: ['click'] }
});
watch(
    () => formData.user,
    () => {
        formRef.value.validateField(['user']);
    }
);
// 批量使用设置限制弹框
const batchOpen = () => {
    BatchOprationRef.value.batchVisible = true;
};
// 批量使用设置限制数量
const batchsetNum = (val: number) => {
    const ids = getSetionId('id', select_all_user_data.value);
    formData.user_limit.map((item: any) => {
        if (ids.includes(item.id)) {
            item.limit = val;
        }
    });
};
// 修改数量
const inputNum = (row: any) => {
    let num = row.limit;
    num = num.replace(/\D/g, '');
    if (num >= 200) {
        num = 200;
    }
    if (num < 1) {
        num = 1;
    }
    row.limit = num;
};
// 确定返回
const confimBack = () => {
    // store.dispatch('content/group',{groupId:0})
    router.back();
};
const getlimit = (key: number, data: object[]) => {
    const res: object = data.find((item: any) => item.id == key);
    return res?.limit || 200;
};
// 获取使用成员
const getDepart = (res: any) => {
    const arr: any[] = [];
    const ids = getSetionId('id', formData.user_limit);
    res.forEach((item: any) => {
        item.limit = getlimit(item.id, formData.user_limit);
        arr.push(item);
    });
    creators.value = arr;
    formData.user = getSetionId('id', arr);
    formData.user_limit = arr;
};
//打开备用员工弹框
const openDepart2 = () => {
    if (look.value) return;
    departVisible.value = true;
};
// 获取备用成员
const getDepart2 = (res: any) => {
    reserve_userList.value = res[0] || {};
    if (res?.length) {
        suffix.style.position = 'relative';
        input__inner.style.paddingLeft = '40px';
        img.src = reserve_userList.value?.avatar;
        img.style.display = 'block';
        formData.reserve_user = reserve_userList.value?.name;
    } else {
        img.style.display = 'none';
        formData.reserve_user = '';
    }
};
// 搜索员工添加上限
const searchUserLimit = (val: string) => {
    formData.user_limit = !val
        ? creators.value
        : formData.user_limit.filter((item: any) => item.name.indexOf(val) != -1);
};
// 选择员工添加上限
const handleSelectionChange = (data: any) => {
    select_all_user_data.value = data;
};
// 保存
const save = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean, fileds: any) => {
        if (!valid) {
            for (const i in fileds) {
                const dom = document.querySelector(`.form_item_${i}`);
                dom.scrollIntoView({
                    block: 'center',
                    behavior: 'smooth'
                });
                break;
            }
            return;
        }
        // 群活码
        if (formData.group_type == 1) {
            formData.groupchat = GroupChatRef.value.list;
        } else {
            if (IsNotEmpty(AutoGroupRef.value.autoList)) {
                const flag = AutoGroupRef.value.autoList.every((item: any) => !!item.qr_code && !!item.name);
                if (!flag) {
                    ElMessage.warning('群活码名称或者二维码不能为空');
                    return;
                }
                formData.groupchat_code = AutoGroupRef.value.autoList;
            }
        }
        // 群上限savewelcome_attachment
        const arr: any[] = [];
        if (IsNotEmpty(creators.value)) {
            creators.value.forEach((item: any) => {
                arr.push({
                    id: item.id,
                    user_id: item.id,
                    limit: item.limit
                });
            });
        }
        formData.user_limit = arr;
        formData.reserve_user = reserve_userList.value.id;
        formData.tag_list = getSetionId('id', AllTagList.value);

        // formData.welcome_content = materialResult.value.welcome_info.welcome_text //入群引导语
        formData.welcome_info = materialResult.value.welcome_info;
        if (!materialResult.value.welcome_info.welcome_text) {
            ElMessage.warning('入群引导语不能为空');
            return;
        }
        if (formData.tag_flag == 1 && !IsNotEmpty(formData.tag_list)) {
            ElMessage.warning('标签不能为空');
            return;
        }

        store.dispatch('content/group', { groupId: formData.group_id });
        // 新建
        if (!isEdit.value) {
            autoGroupCreate(formData).then((res: any) => {
                ElMessage.success('创建成功');
                router.push({
                    path: '/customer/groupManage/autopullgroup',
                    query: {
                        group_id: formData.group_id
                    }
                });
            });
        } else {
            formData.id = autoGroupId.value;
            autoGroupEdit(formData).then((res: any) => {
                ElMessage.success('编辑成功');
                router.push({
                    path: '/customer/groupManage/autopullgroup',
                    query: {
                        group_id: formData.group_id
                    }
                });
            });
        }
    });
};
// 取消
const cancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    confimBack();
};
// 查看如何创建
const howCreate = () => {
    router.push('/customer/groupManage/autopullgroup/autogroupconfig');
};
// 详情
const getGroupDetail = () => {
    autoGroupInfo({ id: autoGroupId.value }).then((res: any) => {
        store.dispatch('content/group', { groupId: res.group_id });
        formData.group_type = res.group_type.toString(); //拉群方式
        formData.avatar_link = res.avatar_link; // 二维码
        formData.name = res.name; //群聊名称
        formData.group_id = res.group_id; //所属分组
        creators.value = showMember(res.user_limit); // 使用成员
        // 过滤不正常员工数据
        const normalUserArr = (res.user_limit || []).filter(x => x.name && x.id);
        formData.user = getSetionId('id', normalUserArr); // 使用成员
        res.reserve_user.type = 'user';
        // 兼容不正常员工数据
        if (res?.reserve_user?.id && res?.reserve_user?.name) {
            showReusers(res.reserve_user);
            creators2.value = [res.reserve_user];
        }
        formData.user_limit_flag = res.user_limit_flag; // 是否员工添加上限
        formData.user_limit = showMember(res.user_limit);
        formData.verify_flag = res.verify_flag; //好友验证
        formData.tag_flag = res.tag_flag; // 标签是否显示
        // 欢迎语组件回显数据
        inputContentData.value = res.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(res.welcome_info.welcome_material);

        AllTagList.value = res.tag_list; // 标签列表

        if (res.group_type == 1) {
            GroupChatRef.value.list = addProperty([['group_id', 'groupchat_id']], res?.groupchat); //自动拉群列表
            formData.groupchat = GroupChatRef.value.list;
        } else {
            nextTick(() => {
                AutoGroupRef.value.autoList = groupchatAutoFn(res?.groupchat_code); //群活码
                formData.groupchat_code = AutoGroupRef.value.autoList;
            });
        }
    });
};
const groupchatAutoFn = (data: any[]) => {
    const arr: any[] = [];
    if (data.length > 0) {
        data.forEach((item: any, index: number) => {
            item.id = index;
            arr.push(item);
        });
    }
    return arr;
};
//
const showReusers = (data: any) => {
    reserve_userList.value = data;
    suffix.style.position = 'relative';
    input__inner.style.paddingLeft = '40px';
    img.src = data.avatar;
    img.style.display = 'block';
    formData.reserve_user = data.name;
};
// 回显补充信息
const addProperty = (propertypes: any, data: any) => {
    const arr: any = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            for (const key of propertypes) {
                item[key[0]] = item[key[1]];
            }
            arr.push(item);
        });
    }
    return arr;
};
// 回显选用人员
const showMember = (data: any[]) => {
    const arr = [];
    if (data.length > 0) {
        // 过滤不正常员工数据
        data.filter(x => x.name && x.id).forEach((item: any) => {
            item.type = 'user';
            arr.push(item);
        });
    }
    return arr;
};
// 分组信息
const getGroupListFun = async () => {
    const res = await getGroupList({ type: 21 });
    groupData.value = res.data;
};
// 打开选择标签
const selecTag = () => {
    BatchLabelRef.value.dialogData.labelChooseType = 2;
    BatchLabelRef.value.chooseDataArr = [...AllTagList.value];
    BatchLabelRef.value.dialogVisible = true;
    BatchLabelRef.value.hasConditiion = false;
};
//获取选中的标签
const getTagsFun = (res: any) => {
    AllTagList.value = [...res.data];
};
// 删除标签
const handleClose = (tag: string) => {
    AllTagList.value = AllTagList.value.filter((item: any) => item.id != tag);
};

/**
 * 1-图文 2-文字 3-视频 4-音频 5-图片
 * @param {*} type 1-name 2-imgUrl
 * @param {*} articleType
 */
const getArticleTypeName = (type: number, article: any) => {
    const articleType = article.article_type;
    const list = [
        { name: '', code: 1, iconUrl: '/static/file/official.png' },
        { name: '', code: 2, iconUrl: '/static/file/text.png' },
        { name: '视频', code: 3, iconUrl: '/static/file/mov.png' },
        { name: '音频', code: 4, iconUrl: '/static/file/mp3.png' },
        { name: '图片', code: 5, iconUrl: '/static/file/pic.png' }
    ];
    const info: any = list.find(el => el.code == articleType) || {};
    if (type == 1) {
        return info.name;
    } else if (type == 2) {
        if (articleType == 1) {
            return article.link_share_image;
        } else {
            return info.iconUrl;
        }
    }
};

const materialResult = ref<any>(null);

const changeMaterial = (val: any) => {
    materialResult.value = val;
};

// 选择完之后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};

onMounted(() => {
    autoGroupId.value = router.currentRoute.value.query?.id;
    isEdit.value = router.currentRoute.value.query?.isEdit;
    look.value = router.currentRoute.value.query?.look;
    const groupId = router.currentRoute.value.query?.group_id;
    if (groupId) {
        formData.group_id = +groupId;
    }
    if (autoGroupId.value) {
        getGroupDetail();
    }
    getGroupListFun();

    suffix = document.querySelector('.reserve_select .el-input__wrapper');
    input__inner = document.querySelector('.reserve_select .el-input__inner');
    img.className = 'select_avatar';
    img.style.display = 'none';
    suffix.insertBefore(img, input__inner);
});
</script>
<style scoped lang="scss">
.create_group {
    :deep(.table_header_title) {
        height: 60px;

        th.el-table__cell {
            background: #f9f9f9;
            padding: 10px 0;
        }
    }

    .box_card {
        margin-bottom: 15px;

        .box_card_tit {
            display: flex;
            align-items: center;
            height: 56px;
            padding: 0 24px;
            font-size: 16px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
            margin-bottom: 10px;
            border-bottom: 1px solid #eaeaea;
        }

        .cust_qs {
            .pull_group {
                margin-bottom: 0 !important;
            }

            .group_type_tips {
                display: inline-flex;
                height: 36px;
                background: #fffaf9;
                font-size: 12px;
                line-height: 36px;
                padding: 0 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #585858;

                .text_create {
                    cursor: pointer;
                    color: #ff6b00;
                }
            }

            .lead_words {
                margin-top: 24px;
                width: 580px;
                height: 104px;
                padding: 12px;
                margin-bottom: 25px;
                box-sizing: border-box;
                background: #fffaf9;
                font-size: 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #585858;
                line-height: 20px;
                display: flex;
            }

            .create_erm_desc {
                margin-top: 16px;
                margin-right: 25px;
                width: 775px;
            }
        }

        .base_info {
            margin-top: 15px;

            .el-form-item {
                width: 620px;
            }

            .limit_form_box {
                width: 840px;
            }

            .el-select {
                :deep(.el-input__inner) {
                    width: 520px;
                }
            }

            .reserve_select {
                // width: 180px;
                :deep(.el-input__inner) {
                    width: 180px;
                    padding-left: 26px !important;
                }
            }

            .reserve_select_tips {
                margin-left: 10px;
                font-size: 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #969696;
            }

            .friend_icon {
                margin: 0 10px;
            }

            .friend_form_item {
                width: 800px;
                margin-bottom: 0;
            }

            .erm_container {
                display: flex;
                align-items: flex-end;

                .ewm_box {
                    width: 260px;
                    height: 260px;
                    border-radius: 4px;
                    padding: 22px;
                    box-sizing: border-box;
                    background: #fff;
                    border: 1px solid #eaeaea;
                    position: relative;

                    .user_qrwm {
                        width: 100%;
                        height: 100%;
                    }

                    .user_avatar {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 50px;
                        height: 50px;

                        // background: linear-gradient(139deg, #68A0FF 0%, #3F63EB 100%);
                        // border-radius: 2px;
                        transform: translate(-50%, -50%);
                    }
                }

                .avatar_uploader {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 25px;
                    width: 109px;
                    height: 109px;
                    border-radius: 4px;
                    border: 1px solid #eaeaea;

                    :deep .el-upload--picture-card {
                        width: 109px;
                        height: 109px;
                    }

                    :deep .el-upload-list__item {
                        width: 109px;
                        height: 109px;
                        margin: 0;
                    }

                    .el-upload-list {
                        width: 109px;
                        height: 109px;
                    }

                    .upload-box {
                        text-align: center;

                        .avatar_icon {
                            font-size: 14px;
                            line-height: 14px;
                            font-family: STHeitiSC-Light, STHeitiSC;
                            font-weight: 300;
                            color: #969696;
                        }
                    }

                    .icon_delete {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        font-size: 18px;
                        transform: translate(-50%, -50%);
                    }

                    .plus_text {
                        font-size: 14px;
                        line-height: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;
                    }
                }

                .ewm_box_tips {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #969696;
                }
            }

            .user_staff_item {
                margin-bottom: 10px !important;
            }

            .user_limit_tips {
                width: 740px;
                height: 36px;
                box-sizing: border-box;
                padding-left: 12px;
                background: #fffaf9;
                font-size: 12px;
                line-height: 36px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #585858;
            }

            .user_list {
                margin-top: 10px;

                .user_item_tag {
                    &::before {
                        display: inline-block;
                        content: '';
                        width: 10px;
                        height: 11px;
                        margin-right: 5px;
                        background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
                    }
                }
            }

            .user_item {
                display: inline-flex;
                align-items: center;
                margin-right: 10px;
                height: 30px;
                padding: 0 10px;
                border: 1px solid #f7f7f7;
                position: relative;

                .user_avatar {
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                }

                .close_icon {
                    cursor: pointer;
                    position: absolute;
                    right: -5px;
                    top: -5px;
                    font-size: 12px;
                }
            }

            .customer_info_box {
                display: flex;
                align-items: center;
            }

            .table_form_btn {
                width: 740px;
                margin-top: 16px;
                margin-bottom: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .table_form_search {
                    width: 180px;
                }
            }
        }
    }

    .mb0 {
        margin-bottom: 0;
    }

    .pre_welcome {
        display: flex;
        margin-top: 20px;

        .welcone_l {
            // border-right: 1px solid #eaeaea;
        }
    }

    .prev_box {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 24px 24px 0 48px;
    }

    .submit_bottom {
        z-index: 99;
        position: absolute;
        bottom: 0;
        left: 20px;
        height: 64px;
        width: calc(100% - 40px);
        box-sizing: border-box;
        padding-right: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: #fff;
        box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
        border-radius: 2px;
    }
}

.show {
    display: block;
}

.hide {
    display: none;

    :deep(.el-upload--picture-card) {
        display: none;
    }
}

.input_num {
    width: 100px;
}

.mr10 {
    margin-right: 10px;
}

:deep(.select_avatar) {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 7px;
}

.content {
    padding: 20px;
    padding-left: 44px;
    box-sizing: border-box;
    display: flex;

    .content-left {
        flex: 1;
        padding-right: 48px;
        border-right: 1px solid #eee;
    }

    .content-right {
        padding: 24px 24px 0 48px;

        .phone-title {
            text-align: center;
            margin-bottom: 20px;
        }
    }
}

.new_card_box {
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-sizing: border-box;

    .body_padding {
        padding: 0 24px;
    }
}

.bdt_none {
    border-top: none;
}

.bdb_none {
    border-bottom: none;
}
</style>
